
<link rel="stylesheet" href="<?php echo cssPath ?>formulario.css" type="text/css" media="screen"/>
<script type="text/javascript" src="<?php echo jsPath ?>jquery.min.js"></script>
<script type="text/javascript" src="<?php echo jsPath ?>sliding.form.js"></script>

<div id="content">
    <h1>Contato</h1>
    <?php
    if (isset($_GET['mensagem'])) {
        $mensagem = $_GET['mensagem'];

        if ($mensagem == 'nome') {
            echo '<p class="msnError">Você não digitou seu Nome.</p>';
        } elseif ($mensagem == 'email') {
            echo '<p class="msnError">Você não digitou seu E-mail.</p>';
        } elseif ($mensagem == 'msn') {
            echo '<p class="msnError">Você não digitou seu Mensagem.</p>';
        } elseif ($mensagem == 'error') {
            echo '<p class="msnError">Erro ao enviar a mensagem, tente novamente!</p>';
        } elseif ($mensagem == 'sucesso') {
            echo '<p class="msnSucesso">Mensagem enviada com sucesso!</p>';
        }
    }
    ?>
    <div id="wrapper">
        <div id="steps">
            <form id="formElem" name="formElem" action="/home/envioEmail" method="post">
                <fieldset class="step">
                    <legend>Projeto Kapilyar</legend>
                    <div class="contato">
                        <b>Projeto construído para fins escolares!</b>
                        <br><b>Faetec</b>  - Fundação de Apoio à Escola Tecnica do Estado do Rio de Janeiro
                        <br>Unidade: Oscar Tenório 
                        <br>Curso: Info. para Internet
                        <br>Turno: Noite 
                        <br>Turma: 351
                        <br>Tel.:(21)2332-1056
                        <div>
                            <br><b>Componentes da Dupla:</b>
                            <br> - Caroline Santos
                            <br> - Graziele Sousa
                        </div>
                    </div>  
                </fieldset>
                <fieldset class="step">
                    <legend>Atendimento</legend>
                    <div class="contato">
                        <br><b>E-mail:</b>
                        <br>caroliinesantoos@live.com 
                        <br>grazielehp222@yahoo.com.br
                        <br><b>Tel.:</b>
                        <br>(21)9144-8390
                        <br>(21)9454-0100
                        <br><b>Facebook</b>
                        <br><a href="http://www.facebook.com/CaroliiineSantoos">http://www.facebook.com/CaroliiineSantoos</a>
                        <br><a href="http://www.facebook.com/Eosdm">http://www.facebook.com/Eosdm</a>
                    </div>  
                </fieldset>
                <fieldset class="step">
                    <legend>Mensagem</legend>
                    <p>
                        <label for="nomeContato">Nome</label>
                        <input id="nomeContato" name="nomeContato" type="text" />
                    </p>
                    <p>
                        <label for="emailContato">E-mail</label>
                        <input id="emailContato" name="emailContato" placeholder="contato@kapilyar.com" type="email" />
                    </p>
                    <p>
                        <label for="msnContato">Mensagem</label>
                        <textarea id="msnContato" name="msnContato"></textarea>
                    </p>
                </fieldset>
                <fieldset class="step">
                    <legend>Confirmação</legend>
                    <p>
                        Se os dados estiverem corretos aparecerá
                        um marcador verde, se não aparecerá um vermelho.
                        Confira sempre seus dados antes de enviar!
                        Obrigado(a)!
                    </p>
                    <p class="submit">
                        <button id="registerButton" type="submit">Enviar</button>
                    </p>
                </fieldset>
            </form>
        </div>
        <div id="navigation" style="display:none;">
            <ul>
                <li class="selected">
                    <a href="#">Projeto Kapilyar</a>
                </li>
                <li>
                    <a href="#">Atendimento</a>
                </li>
                <li>
                    <a href="#">Mensagem</a>
                </li>
                <li>
                    <a href="#">Confirmação</a>
                </li>
            </ul>
        </div>
    </div>
</div>